window.onload = function(){
    var li1s = document.getElementsByClassName('li1s')
    var ul1s = document.getElementsByClassName('ul1s')
    for(let i = 0 ; i < 10 ; i++){
        li1s[i].onclick = function(){
            ul1s[i].style.display="block";
            li1s[i].style.backgroundColor="#594e4e";
        }
        ul1s[i].onmouseover = function(){
            ul1s[i].style.display="block";
            li1s[i].style.backgroundColor="#594e4e";
        }
        ul1s[i].onmouseout = function(){
            ul1s[i].style.display="none";
            li1s[i].style.backgroundColor="rgba(0, 0, 0, 0)";
        }
    }


    var divs = document.getElementsByClassName('box2div')
    var ul2s = document.getElementsByClassName('ul2s')
    for(let i = 0 ; i < divs.length ; i++){
        divs[i].onclick = function(){
            divs[i].lastElementChild.style.display="block";
        }
        ul2s[i].onmouseover = function(){
            divs[i].lastElementChild.style.display="block";
        }
        ul2s[i].onmouseout = function(){
            divs[i].lastElementChild.style.display="none";
        }
        divs[i].onmouseout = function(){
            divs[i].lastElementChild.style.display="none";
        }
    }
}
